<template>
    <div class="service">
        <div v-loading="loading" class="chat-con flex">
            <div class="contacts">
                <!-- <div class="contacts-search">
                    <i class="el-icon-search"></i>
                    <el-input
                        v-model="searchContactsName"
                        placeholder="请输入内容"
                        class="search-input"
                    ></el-input>
                </div> -->
                <div class="contacts-list">
                    <div class="search-conver">
                        <i class="el-icon-search"></i>
                        <el-input
                            placeholder="请输入内容"
                            v-model="searchConver"
                            clearable
                        >
                        </el-input>
                    </div>
                    <div
                        v-for="(item, index) in conversationList"
                        :key="index"
                        class="contacts-item flex-center-1"
                        :class="{
                            'contacts-item-active':
                                conversationCurrent == item.conversationID,
                        }"
                        v-show="
                            !majorList.includes(item.conversationID) &&
                            isSearchConver(item.conversationName)
                        "
                        @click="selectIndex(item)"
                    >
                        <div
                            v-show="item.unreadMessageCount > 0"
                            class="unread"
                        >
                            {{ item.unreadMessageCount }}
                        </div>
                        <img
                            :src="
                                item.conversationAvatarUrl
                                    ? item.conversationAvatarUrl
                                    : 'https://api.xiaozhucaishui.com/assets/img/avatar.png'
                            "
                            class="avatar"
                            alt=""
                        />
                        <div class="contacts-info fz-12">
                            <div class="fz-14">
                                {{ item.conversationName }}
                            </div>
                            <span class="text-ellipsis">
                                {{ getShowMessage(item) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat">
                <div class="chat-info flex-sb">
                    <div
                        v-if="conversationObj"
                        class="to-user flex-center-1"
                        @click="queryUsersInfo"
                    >
                        <img
                            :src="
                                conversationObj.conversationAvatarUrl
                                    ? conversationObj.conversationAvatarUrl
                                    : 'https://api.xiaozhucaishui.com/assets/img/avatar.png'
                            "
                            class="avatar"
                            alt=""
                        />
                        {{ conversationObj.conversationName }}
                    </div>
                    <div class="right flex-center-1">
                        <div v-if="serviceId" @click="goService">商家店铺</div>
                        <div @click="tdjb">
                            <i class="el-icon-warning-outline"></i>
                            跳单举报
                        </div>
                    </div>
                </div>

                <chatList
                    :curMessageList="curMessageList"
                    :conversationObj="conversationObj"
                    @moreMessage="moreMessage"
                ></chatList>

                <div class="chat-input">
                    <div class="outbox">
                        <myMarqueeLeft
                            :sendVal="[
                                '官方提醒：请勿轻信不明跳转链接、二维码支付及其他联系方式，如脱离小竹财税平台交易，支付打款。 资金安全、纠纷处理、完善交付将均不受保障！',
                            ]"
                        ></myMarqueeLeft>
                    </div>
                    <div class="chat-menu flex-sb">
                        <div class="left flex">
                            <!-- <div>常用语</div> -->

                            <el-popover
                                v-model="emojiShow"
                                placement="top-start"
                                width="527"
                                trigger="click"
                            >
                                <div class="quick-info" style="padding: 0">
                                    <div
                                        class="quick-title"
                                        style="margin: 12px"
                                    >
                                        表情包
                                    </div>
                                    <div
                                        v-if="emojiShow"
                                        class="quick-list"
                                        style="
                                            max-height: 500px;
                                            max-width: 607px;
                                            overflow-y: auto;
                                            display: flex;
                                            flex-wrap: wrap;
                                        "
                                    >
                                        <el-tooltip
                                            v-for="(item, index) in emojiList"
                                            :key="index"
                                            effect="light"
                                            :content="item.name"
                                            placement="top-end"
                                        >
                                            <img
                                                class="quick-img"
                                                :src="item.url"
                                                :alt="item.name"
                                                @click="clickEmoji(item.url)"
                                            />
                                        </el-tooltip>
                                    </div>
                                </div>
                                <!-- <i class="el-icon-s-comment"></i> -->
                                <img
                                    slot="reference"
                                    style="height: 20px; width: 20px"
                                    src="~/assets/images/csjh/emoji.png"
                                    alt=""
                                />
                            </el-popover>
                            <el-upload
                                accept="image/*"
                                class="avatar-uploader"
                                :action="imgUploadUrl"
                                :show-file-list="false"
                                :on-success="onSuccess"
                                :headers="headers"
                            >
                                <i class="el-icon-picture-outline"></i>
                            </el-upload>

                            <span @click="clickFile">文件</span>

                            <span
                                v-if="userInfo && userInfo.is_server == 1"
                                @click="showShop"
                                >商品</span
                            >
                            <span
                                v-if="userInfo && userInfo.is_server == 1"
                                @click="showOrder"
                                >订单</span
                            >
                        </div>
                        <div class="right">
                            <!-- <i class="el-icon-time"></i> -->
                        </div>
                    </div>
                    <div @keydown="keydown" id="ctrlVpaste" class="input">
                        <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            resize="none"
                            v-model="messageText"
                        >
                        </el-input>
                    </div>
                    <div class="submit">
                        <div class="submit-text">Shift + Enter 换行</div>
                        <el-button
                            class="submit2"
                            type="primary"
                            @click="submitMessage(1)"
                        >
                            <span v-show="switchSubmitType">发送</span>
                            <i
                                v-show="!switchSubmitType"
                                class="el-icon-loading"
                            ></i>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单 -->
        <el-dialog title="订单" :visible.sync="isOrder" width="472px">
            <div v-if="isOrder" class="dialog-list">
                <div v-for="(item, index) in list" :key="index" class="item">
                    <div class="message-goods">
                        <div class="goods-info flex-center-1">
                            <img
                                :src="item.shopinfo.pic.split(',')[0]"
                                alt=""
                            />
                            <div class="title">
                                {{ item.shopinfo.name }}
                                <span>
                                    {{
                                        item.money == 0
                                            ? "面议"
                                            : "￥" + item.money
                                    }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="but">
                        <el-button
                            round
                            size="mini"
                            @click="submitMessage('order', item)"
                            >发送订单</el-button
                        >
                    </div>
                </div>
                <el-empty
                    v-if="total == 0"
                    description="该用户暂无订单"
                ></el-empty>
                <div v-if="total > 5" class="page">
                    <el-pagination
                        small
                        layout="prev, pager, next"
                        :current-page.sync="page"
                        :total="total"
                        :page-size="5"
                        @current-change="getOrder"
                    >
                    </el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isOrder = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 订单 end -->
        <!-- 商品 -->
        <el-dialog title="商品" :visible.sync="isShop" width="472px">
            <div v-if="isShop" class="dialog-list">
                <div v-for="(item, index) in list" :key="index" class="item">
                    <div class="message-goods">
                        <div class="goods-info flex-center-1">
                            <img :src="item.pic.split(',')[0]" alt="" />
                            <div class="title">
                                {{ item.name }}
                                <span>
                                    {{
                                        item.price == 0
                                            ? "面议"
                                            : "￥" + item.price
                                    }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="message-goods-buts">
                        <el-button
                            round
                            size="mini"
                            @click="submitMessage('shop', item)"
                        >
                            发送商品
                        </el-button>
                        <nuxt-link
                            :to="'/service/productrelease?id=' + item.id"
                            target="_blank"
                            class="text"
                        >
                            <el-button
                                round
                                size="mini"
                                @click="isShop = false"
                            >
                                修改商品
                            </el-button>
                        </nuxt-link>
                    </div>
                </div>
                <div v-if="total > 5" class="page">
                    <el-pagination
                        small
                        layout="prev, pager, next"
                        :current-page.sync="page"
                        :total="total"
                        :page-size="5"
                        @current-change="getShop"
                    >
                    </el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShop = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 商品 end -->
        <input
            style="height: 0; width: 0"
            type="file"
            ref="fileInputref"
            @change="uploadFile"
        />
    </div>
</template> 

<script>
import { mapState, mapActions } from "vuex";

import {
    getuserallorder,
    shop_manager_list,
    sendmessage,
    send_message,
    jigou_getInfo,
    getMajorList,
    check_read,
    delay_pushmessage,
} from "@/assets/api/service";

import chatList from "@/components/service/chatList.vue";
import myMarqueeLeft from "@/components/csjh/myMarqueeLeft.vue";

import { goTopSmooth } from "@/assets/utils/utils";

import emojiList from "@/assets/json/emojiList.json";
import axios from "axios";
import { commonUpload } from "@/assets/api/indexApi";

import mixinsZego from "~/mixins/zego";
// let this.zim = null;

export default {
    components: {
        chatList,
        myMarqueeLeft,
    },
    metaInfo() {
        return {
            title: "聊天",
            meta: [
                {
                    name: "keywords",
                    content: "小竹,财税,小竹财税,服务商,小竹企服,聊天",
                },
            ],
        };
    },
    head() {
        return {
            title: "小竹企服沟通-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服",
                },
            ],
        };
    },
    layout: "serverHome",
    mixins: [mixinsZego],
    data() {
        return {
            searchContactsName: "",
            messageText: "",
            switchSubmitType: true,

            loading: false,
            isOrder: false,
            isShop: false,

            quickShow: false,
            emojiShow: false,

            page: 1,
            total: 0,
            list: [],

            imgUrl: "",
            fileUrl: "",
            fileName: "",
            serviceId: "",

            conversationCurrent: null,

            historyConfig: {},
            curMessageList: [],

            emojiList: emojiList,

            imgUploadUrl: "",

            bodyHidden: true, // 用户是否在当前页

            getExtendedData: function (str) {
                if (typeof str == "string") {
                    return JSON.parse(str);
                } else return str;
            },

            // 展示最新消息
            getShowMessage: function (item) {
                if (!item.lastMessage) return "";
                let type = JSON.parse(item.lastMessage.extendedData).type;
                if (type == 11) return "[图片]";
                else if (type == 111) return "[表情]";
                else return item.lastMessage.message;
            },

            majorList: [],

            searchConver: "",
            isSearchConver: (name) => {
                if (!name) return true;
                if (!this.searchConver) return true;
                return name.includes(this.searchConver);
            },

            zim: null,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            conversationList: (state) => state.conversationList,
            zimStatus: (state) => state.zimStatus,
        }),
        conversationObj: function () {
            if (this.conversationCurrent != null) {
                for (let item of this.conversationList) {
                    if (item.conversationID == this.conversationCurrent) {
                        return item;
                    }
                }
            } else return null;
        },
        //上传图片的请求头
        headers() {
            return {
                token: this.userInfo ? this.userInfo.token : "",
            };
        },
    },

    beforeDestroy() {
        document.removeEventListener(
            "visibilitychange",
            this.handleVisibilityChange
        );
    },
    beforeMount() {},
    mounted() {
        document.addEventListener(
            "visibilitychange",
            this.handleVisibilityChange
        );
        goTopSmooth();
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
        this.loading = true;

        // let that = this;
        // if (!this.zimStatus) {
        //     that.createZIM().then((zim_x) => {
        //         that.$parent.$parent.getZIM();
        //     });
        // }
        this.getUserInfo2()
            .then((user) => {
                this.createZIM()
                    .then((zim_x) => {
                        this.ZIMLogin(zim_x).then((zim_l) => {
                            this.zim = zim_l;
                            this.getZIM();
                            this.initZim();
                        });
                    })
                    .catch(() => {});
            })
            .catch(() => {});

        this.addPaste();
        this.getMajorList();
        // this.$nextTick(() => {
        //     if (that.zimStatus) {
        //         that.initZim();
        //     }
        // });
    },
    watch: {
        // zimStatus: function (n, o) {
        //     let that = this;
        //     this.$nextTick(() => {
        //         if (that.zimStatus) {
        //             that.initZim();
        //         }
        //     });
        // },
    },
    methods: {
        ...mapActions("common", [
            "queryConversationList",
            "ZIMLogin",
            "createZIM",
            "getUserInfo2",
        ]),

        // 获取老师列表
        async getMajorList() {
            const res = await getMajorList({});
            if (res.code == 1) {
                this.majorList = [];
                for (let item of res.data) {
                    this.majorList.push(item.user_id + "");
                }
            }
        },

        handleVisibilityChange() {
            if (document.hidden) {
                console.log("用户离开了当前页面");
                this.bodyHidden = false;
            } else {
                console.log("用户回到了当前页面");
                this.bodyHidden = true;
                if (this.conversationObj)
                    this.zim.sendConversationMessageReceiptRead(
                        this.conversationObj.conversationID,
                        0
                    );
            }
        },

        async initZim() {
            //
            localStorage.setItem("zimStatus", 1);
            window.addEventListener("beforeunload", (e) =>
                localStorage.removeItem("zimStatus")
            );

            let that = this;
            // 注册监听“收到单聊消息”的回调
            this.zim.on("receivePeerMessage", function (zim, zimRes) {
                console.log("收到消息···········", zim, zimRes);
                let { fromConversationID, messageList } = zimRes;
                if (fromConversationID == that.conversationCurrent) {
                    that.curMessageList.push(...messageList);
                    console.log("当前bodyHidden的状态为", that.bodyHidden);
                    if (that.bodyHidden)
                        that.zim.sendConversationMessageReceiptRead(
                            that.conversationObj.conversationID,
                            0
                        );
                }
            });
            this.zim.on(
                "conversationMessageReceiptChanged",
                function (zim, zimRes) {
                    // 把自己发的消息标记为已读
                    for (let messageItem of that.curMessageList) {
                        if (messageItem.senderUserID == that.userInfo.id) {
                            messageItem.receiptStatus = 2;
                        }
                    }
                    check_read({
                        to_userid: that.conversationObj.conversationID,
                    });
                }
            );

            // 有收到消息时拉取会话
            await this.queryConversationList(this.zim);
            let to_zim_userid = localStorage.getItem("to_zim_userid");

            if (to_zim_userid && to_zim_userid != this.userInfo.id + "") {
                this.send_message(to_zim_userid);
            } else {
                // this.conversationCurrent =
                //     this.conversationList[0].conversationID;
                // this.getHistoryMessage();
                // console.log(
                //     "===========",
                //     this.conversationList,
                //     to_zim_userid
                // );
                localStorage.removeItem("to_zim_userid");
                if (this.conversationList.length > 0)
                    this.selectIndex(this.conversationList[0]);
            }
            this.loading = false;
        },

        // 进入页面时发现有to_zim_userid， 则对该id发送空消息 使其产生对话 发送后则删除本地to_zim_userid
        async send_message(to_zim_userid) {
            if (this.userInfo.id + "" == to_zim_userid) return;
            const res = await send_message({
                userid: this.userInfo.id + "",
                touserid: to_zim_userid,
            });
            if (res.code == 1) {
                let that = this;
                setTimeout(() => {
                    // let is = false;
                    // for (let item of that.conversationList) {
                    //     if (item.conversationID == to_zim_userid) {
                    //         is = true;
                    //     }
                    // }
                    // if (is) {
                    localStorage.removeItem("to_zim_userid");
                    // that.getHistoryMessage();
                    that.selectIndex({
                        conversationID: to_zim_userid,
                        conversationAvatarUrl: "",
                    });
                    // } else {
                    //     that.send_message(to_zim_userid);
                    // }
                }, 800);
            }
        },

        // 选择用户
        selectIndex(item) {
            if (this.conversationCurrent == item.conversationID) return;
            this.conversationCurrent = item.conversationID;
            this.getHistoryMessage();

            // 获取用户服务商详情
            this.jigou_getInfo();

            // 从服务端查询用户详细信息 10 s 内最多只能查询 10 个用户详细配置
            if (item.conversationAvatarUrl == "") this.queryUsersInfo();
        },

        async jigou_getInfo() {
            const res = await jigou_getInfo({
                id: this.conversationCurrent,
            });
            if (res.data && res.code == 1) {
                this.serviceId = res.data.id;
            } else {
                this.serviceId = "";
            }
        },

        queryUsersInfo() {
            this.zim.queryUsersInfo([this.conversationCurrent], {
                isQueryFromServer: true,
            });
        },

        // 获取历史记录
        getHistoryMessage() {
            if (!this.conversationObj) return;
            this.curMessageList = [];
            let conversationID = this.conversationObj.conversationID;
            let conversationType = 0;

            // 从后往前获取会话历史消息，每次获取 30 条
            this.historyConfig = {
                nextMessage: null, // 首次获取时 nextMessage 为 null
                count: 30,
                reverse: true,
            };
            let that = this;
            this.zim
                .queryHistoryMessage(
                    conversationID,
                    conversationType,
                    this.historyConfig
                )
                .then(({ messageList }) => {
                    that.curMessageList.push(...messageList);
                    console.log(that.curMessageList);
                    // 清楚和对方的消息未读数
                    if (that.conversationObj.unreadMessageCount > 0) {
                        this.zim.clearConversationUnreadMessageCount(
                            conversationID,
                            conversationType
                        );
                    }
                    // 回执
                    this.zim.sendConversationMessageReceiptRead(
                        conversationID,
                        0
                    );
                });
        },

        // 获取更多历史记录
        moreMessage() {
            // 后续分页获取时，nextMessage 为当前获取到的消息列表的第一条消息
            this.historyConfig.nextMessage = this.curMessageList[0];
            this.zim
                .queryHistoryMessage(
                    this.conversationObj.conversationID,
                    0,
                    this.historyConfig
                )
                .then(({ messageList }) => {
                    this.curMessageList.unshift(...messageList);
                });
        },

        // 发送消息
        submitMessage(messageType, sItem = null) {
            // 发送方法开关
            if (!this.switchSubmitType) return;
            if (messageType == 1 && !this.messageText) return;
            let that = this;
            // 清除会话未读信息
            this.zim
                .clearConversationUnreadMessageCount(
                    this.conversationObj.conversationID,
                    0
                )
                .then(function (res) {
                    // 操作成功

                    // 关闭两个弹窗
                    that.isOrder = false;
                    that.isShop = false;

                    // 关掉发送能力，防止重复点击
                    that.switchSubmitType = false;
                    let toConversationID = that.conversationObj.conversationID;
                    let conversationType = 0;
                    let config = {
                        priority: 1, // 设置消息优先级，取值为 低：1（默认），中：2，高：3
                        hasReceipt: true, // 发送消息时候，该消息是否带回执。
                    };

                    let extendedData = {
                        type: messageType,
                    };
                    let message = "";
                    if (messageType == 1) message = that.messageText;
                    else if (messageType == "order") {
                        message = "[订单]";
                        extendedData.order_no = sItem.order_no;
                        extendedData.money = sItem.money;
                        extendedData.pic = sItem.shopinfo.pic.split(",")[0];
                        extendedData.name = sItem.shopinfo.name;
                    } else if (messageType == "shop") {
                        message = "[" + sItem.name + "]";
                        extendedData.id = sItem.id;
                        extendedData.price = sItem.price;
                        extendedData.pic = sItem.pic.split(",")[0];
                        extendedData.name = sItem.name;
                    } else if (messageType == 11) {
                        message = that.imgUrl;
                    } else if (messageType == 111) {
                        message = that.imgUrl;
                    } else if (messageType == "file") {
                        message = that.fileName;
                        extendedData.fileUlr = that.fileUrl;
                    }

                    let messageTextObj = {
                        type: 1,
                        message: message,
                        extendedData: JSON.stringify(extendedData),
                    };

                    let notification = {
                        onMessageAttached: function (message) {
                            // todo: Loading
                        },
                    };

                    that.zim
                        .sendMessage(
                            messageTextObj,
                            toConversationID,
                            conversationType,
                            config,
                            notification
                        )
                        .then(function (sendRes) {
                            console.log(
                                "发送成功--------------------",
                                sendRes
                            );
                            // 发送成功
                            that.switchSubmitType = true;
                            that.curMessageList.push(sendRes.message);
                            that.messageText = "";
                            // 消息记录到后台
                            that.sendmessage(sendRes);
                        })
                        .catch(function (err) {
                            // 发送失败
                            console.log("发送失败--------------------", err);
                            if (err.code == 6000204) {
                                that.$message.error(err.message);
                            } else {
                                that.switchSubmitType = true;
                                that.ZIMLogin().then((e) => {
                                    that.submitMessage(messageType, sItem);
                                });
                            }
                        });
                })
                .catch(function (err) {
                    // 操作失败
                    console.log(err);
                });
        },

        // 跳单举报
        tdjb() {
            let { href } = this.$router.resolve({
                path: "/chatlink",
            });
            window.open(href, "_blank");
        },

        // 发送表情包
        clickEmoji(url) {
            this.emojiShow = false;
            this.imgUrl = url;
            this.submitMessage(111);
        },

        // 消息记录到后台
        async sendmessage(send) {
            let sendRes = { ...send.message };
            console.log(sendRes);
            if (sendRes.message) {
                sendRes.message = sendRes.message.replace(/%/g, "%25");
                sendRes.message = sendRes.message.replace(/\+/g, "%2B");
                sendRes.message = sendRes.message.replace(/</g, "%3C");
                sendRes.message = sendRes.message.replace(/>/g, "%3E");
            } else return;
            sendRes.extendedData = JSON.parse(sendRes.extendedData);
            const res = await sendmessage({
                type: "1",
                message: JSON.stringify(sendRes),
                to_userid: sendRes.conversationID,
                username:
                    this.userInfo.is_server == 1 && this.userInfo.service_info
                        ? this.userInfo.service_info.name
                        : this.userInfo.nickname,
            });
            let that = this;
            if (res.code == 1)
                setTimeout(() => {
                    delay_pushmessage({
                        id: res.data,
                        to_userid: that.conversationObj.conversationID,
                    });
                }, 5000);
        },

        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.submitMessage(1);
                }
            }
        },

        // 显示订单弹窗
        showOrder() {
            if (!this.conversationObj) return;
            this.isOrder = true;
            this.getOrder(1);
        },

        // 显示商品弹窗
        showShop() {
            if (!this.conversationObj) return;
            this.isShop = true;
            this.getShop(1);
        },

        async getShop(page) {
            this.page = page;
            const res = await shop_manager_list({
                page: this.page,
                pagesize: 5,
                status: 1,
            });
            if (res.code == 1) {
                this.list = res.data;
                // console.log(this.list);
                if (this.list.length > 0) this.total = res.data[0].allcount;
            }
        },

        async getOrder(page) {
            this.page = page;
            const res = await getuserallorder({
                page: this.page,
                pagesize: 5,
                user_id: this.conversationObj.conversationID,
                status: 0,
            });
            if (res.code == 1) {
                if (res.data.length > 0) this.total = res.data[0].all_count;
                else this.total = 0;
                this.list = res.data;
            }
        },

        onSuccess(response, file, fileList) {
            if (response.code == 1) {
                this.imgUrl = response.data.fullurl;
                this.submitMessage(11);
            }
        },

        addPaste() {
            let that = this;
            const el = document.getElementById("ctrlVpaste");
            // 此事件也可以添加到document上，但该事件会有冒泡行为，则本页面上任何位置的粘贴操作都会触发
            el.addEventListener("paste", (e) => {
                let file = null;
                const items = (e.clipboardData || window.clipboardData).items;
                if (items && items.length) {
                    for (let i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf("image") !== -1) {
                            // 如果是image类型存为file
                            file = items[i].getAsFile();
                            break;
                        }
                    }
                }
                if (file) that.paste(file);
            });
        },

        // 复制粘贴
        async paste(e) {
            const response = await commonUpload({
                file: e,
            });
            if (response.code == 1) {
                this.imgUrl = response.data.fullurl;

                const h = this.$createElement;
                this.$msgbox({
                    title: "消息",
                    message: h("img", {
                        style: {
                            width: "388px",
                            height: "258px",
                            objectFit: "contain",
                        },
                        attrs: { src: this.imgUrl },
                    }),
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                })
                    .then((action) => {
                        this.submitMessage(11);
                    })
                    .catch(() => {});
            }
        },

        clickFile() {
            this.$refs.fileInputref.click();
        },

        uploadFile() {
            const fileInputref = this.$refs.fileInputref;
            const file = fileInputref.files[0];

            if (file.size > 10 * 1024 * 1024) {
                this.$message({
                    message: "文件大小不能超过10MB",
                    type: "warning",
                });
                return;
            }

            let isType = [
                "doc",
                "docx",
                "ppt",
                "pptx",
                "xls",
                "xlsx",
                "xlsm",
                "pdf",
                "rar",
                "zip",
                "7z",
                "gz",
                "tar",
                "bz2",
                "iso",
                "txt",
            ];
            let type = file.name.split(".");
            type = type[type.length - 1];
            if (!isType.includes(type)) {
                this.$message({
                    message: "请上传word, ppt, excel, pdf或者压缩包等文件",
                    type: "warning",
                });
                return;
            }

            const formData = new FormData();
            formData.append("file", file);
            let that = this;
            axios.post("/api/common/upload", formData).then((res) => {
                // 处理上传成功后的逻辑
                let response = res.data;
                console.log(response);
                if (response.code == 1) {
                    that.fileUrl = response.data.fullurl;
                    that.fileName = file.name;
                    that.submitMessage("file");
                } else {
                    that.$message({
                        message: "上传失败",
                        type: "error",
                    });
                }
            });
        },

        // 前往服务商详情
        goService() {
            let routeData = this.$router.resolve({
                path: "/service/servicedetail",
                query: {
                    id: this.serviceId,
                },
            });
            window.open(routeData.href, "_blank");
        },
    },
};
</script>

<style lang="scss" scoped>
.service {
    background: #c6cfd8;
    padding-top: 25px;
    padding-bottom: 40px;
}

.chat-con {
    width: 1200px;
    height: 763px;
    background-color: #fff;
    margin: 0 auto;
}

.contacts {
    min-width: 260px;
    width: 260px;
    border-right: 1px solid #f4f4f4;

    .contacts-search {
        display: flex;
        align-items: center;
        position: relative;
        padding: 25px;

        i {
            position: absolute;
            left: 40px;
            z-index: 1;
            color: #9c9c9c;
        }

        &::v-deep .el-input__inner {
            background-color: #f6f6f6;
            border-radius: 30px;
            padding-left: 38px;
        }
    }
}

.contacts-list {
    overflow-y: auto;
    height: 763px;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #b2e6fa;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }

    .contacts-item {
        cursor: pointer;
        padding: 12px 0;
        padding-left: 22px;
        border-top: 1px solid #f1f1f1;
        position: relative;

        &:hover {
            background-color: #f6f6f6;
        }

        .unread {
            background-color: #ff6900;
            color: #ffffff;
            line-height: 20px;
            font-size: 12px;
            padding: 0 6px;
            border-radius: 20px;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }

        .avatar {
            width: 43px;
            height: 43px;
            border-radius: 50px;
            object-fit: cover;
        }

        .contacts-info {
            color: #666666;
            padding-left: 15px;

            div {
                color: #333333;
                margin-bottom: 4px;
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 隐藏溢出部分 */
                text-overflow: ellipsis; /* 文字溢出显示省略号 */
                width: 138px;
            }

            span {
                display: block;
                width: 155px;
            }
        }
    }

    .contacts-item-active {
        background-color: #f6f6f6 !important;
    }
}

.chat {
    width: 940px;
}

.chat-info {
    align-items: center;
    padding: 0 28px;
    height: 56px;
    // position: sticky;
    // top: 0;
    background-color: #fff;
    z-index: 999;

    .to-user {
        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 36px;
            object-fit: cover;
            margin-right: 12px;
        }
    }

    .right {
        i {
            padding-right: 2px;
            font-size: 16px;
        }

        div {
            cursor: pointer;
            font-size: 14px;
            color: #333333;
            margin-left: 50px;
        }
    }
}

.chat-input {
    .input {
        &::v-deep .el-textarea__inner {
            border-width: 0;
            padding: 8px 30px;
        }
    }

    .submit {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .submit-text {
            font-size: 12px;
            color: #666666;
            margin-right: 8px;
        }

        .submit2 {
            width: 70px;
            height: 28px;
            border-radius: 4px;
            padding: 0;
            line-height: 28px;
            font-size: 12px !important;
            border-width: 0;
            // background: #1c87f3;
            font-size: 14px;
            color: #ffffff;
            margin-left: 15px;
            margin-right: 24px;
        }
    }
}

.chat-menu {
    align-items: center;
    padding: 12px 33px;

    .left {
        $right: 20px;

        span {
            font-size: 12px;
            color: #333333;
            margin-right: $right;
            cursor: pointer;
        }

        i {
            color: #333333;
            font-size: 18px;
            color: #333333;
            margin-right: $right;
            cursor: pointer;
        }

        // div {
        //     width: 52px;
        //     height: 21px;
        //     line-height: 21px;
        //     text-align: center;
        //     background: #DDEEFF;
        //     border-radius: 2px;
        //     font-size: 12px;
        //     color: #1685F6;
        //     margin-right: $right;
        //     cursor: pointer;
        // }
    }

    .right {
        color: #333333;
        font-size: 18px;
        color: #333333;
    }
}

.message-goods {
    padding: 13px 22px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #d6d6d6;
    width: 326px;

    .text {
        font-size: 18px;
        color: #333333;
    }

    .goods-info {
        width: 100%;
        height: 64px;
        background: #f9f9f9;
        border-radius: 4px;

        img {
            width: 64px;
            height: 64px;
            border-radius: 4px;
        }

        .title {
            padding-left: 18px;
            font-size: 14px;
            color: #666666;

            span {
                display: block;
                font-size: 14px;
                color: #666666;
                padding-top: 7px;
            }
        }
    }

    .warning {
        font-size: 14px;
        color: #999999;
    }
}

.message-goods-buts {
    text-align: center;
    &::v-deep .el-button {
        // display: block;
        margin: 0;
        margin-top: 10px;
    }
}

.dialog-list {
    .item {
        display: flex;
        align-items: center;
        padding: 8px 0;

        .but {
            text-align: right;
            padding-left: 20px;
        }
    }
}

.page {
    text-align: center;
    padding-top: 10px;
}

.quick-info {
    padding: 12px;

    .quick-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        border-bottom: 1px solid #d8d8d8;
        text-align: center;
        padding: 10px 0 15px 0;
    }

    .quick-list {
        padding: 0 16px;
        padding-top: 18px;

        .quick-item {
            margin: 12px 0;
            font-size: 12px;
            color: #333333;
            cursor: pointer;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // -webkit-line-clamp: 2;
            // display: -webkit-box;
            // -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;

            &:hover {
                color: #1c87f3;
            }
        }

        .quick-img {
            width: 94px;
            height: 94px;
            object-fit: contain;
            margin: 12px 9px;
            cursor: pointer;
        }
    }
}

.outbox {
    padding: 0 30px;
    background-color: #fffaf4;

    ::v-deep .my-uname {
        color: #b8813f !important;
    }
}

.search-conver {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    position: relative;
    i {
        position: absolute;
        left: 42px;
        z-index: 1;
        color: #9c9c9c;
    }
    &::v-deep .el-input__inner {
        background: #f6f6f6;
        border-radius: 120px;
        padding-left: 33px;
    }
}
</style>./servicechat.vue